<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="bar" title="蘑菇街" />
    <div class="loading" v-if="state.Loading">
      <van-loading size="24px">加载中...</van-loading>
    </div>
    <Scroll
      class="content"
      @scrolls="scrolls"
      @pullingUp="pullingUp"
      @pullingDown="pullingDown"
      :pullUpLoad="true"
      :pullDownRefresh="true"
    >
      <div>
        <!-- 轮播图 -->
        <Banner :banner="state.banner" />
        <!-- loding -->
        <Loding />
        <!-- 四个小圆图区域 -->

        <div class="recommended justify-space-evenly d-flex">
          <a
            :href="item.link"
            class="d-flexs"
            v-for="item in state.recommended"
            :key="item.sort"
          >
            <van-image width="80" height="80" round :src="item.image" />
            <p>{{ item.title }}</p>
          </a>
        </div>
        <!-- 本周流行 -->
        <div class="week">
          <img src="@/assets/img/home/recommend_bg.jpg" alt="" />
        </div>
        <!-- 切换栏 -->
        <Tab
          :tablist="state.tablist"
          :goods="state.list"
          @change="checkout"
          @checkout="checkout"
        />
        <div ref="footer" style="height: 44px"></div>
      </div>
    </Scroll>
    <BackTop @click="back" v-show="state.backshow" />
  </div>
</template>
<script setup>
import Banner from "@/components/common/Banner";
import Loding from "@/components/common/Loding.vue";
import Tab from "@/components/content/Tab.vue";
import Scroll from "@/components/common/Scroll";
import BackTop from "@/components/common/Back.vue";
// 上面是组件
import { getswiper, getlist } from "@/utils/http.js";
import { useStore } from "vuex";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";

const store = useStore();
const ctx = getCurrentInstance();
const state = reactive({
  banner: [],
  recommended: [],
  tablist: ["流行", "新款", "精选"],
  type: "流行",
  page: 1,
  goods: {
    pop: {
      page: 1,
      list: [],
    },
    new: {
      page: 1,
      list: [],
    },
    sell: {
      page: 1,
      list: [],
    },
  },
  list: [], //切换的数据
  scroll: null, //bs 实例
  Loading: false, //下拉刷新图标显示
  backshow: false, //返回顶部按钮
  status: false, //当前状态
});
// loding
store.commit("setloding", true);
// 发起  数据请求
const getswiperdata = async () => {
  const { data: res } = await getswiper();
  if (res.success) store.commit("setloding", false);
  // 赋值数据请求
  state.banner = res.data.banner.list;
  state.recommended = res.data.recommend.list;
};
getswiperdata();

// Tab数据获取
const getlistdata = async (type, page) => {
  if (type == "pop") {
    const { data: res } = await getlist(type, page);
    state.goods.pop.list.push(...res.data.list);
    state.scroll.finishPullUp();
  } else if (type == "new") {
    const { data: res } = await getlist(type, page);
    state.goods.new.list.push(...res.data.list);
    state.scroll.finishPullUp();
  } else {
    const { data: res } = await getlist(type, page);
    state.goods.sell.list.push(...res.data.list);
    state.scroll.finishPullUp();
  }
};
// 调用函数
getlistdata("pop", state.goods.pop.page);
getlistdata("new", state.goods.new.page);
getlistdata("sell", state.goods.sell.page);
state.list = state.goods.pop.list;
// 子组件传递过来的数据 更改 tab 数据
const checkout = (e) => {
  state.type = e;
  // 判断当前点击什么 Tab 页
  if (state.type == "流行") {
    state.list = state.goods.pop.list;
  } else if (state.type == "新款") {
    state.list = state.goods.new.list;
  } else {
    state.list = state.goods.sell.list;
  }
};
// Scroll 传递过来的 scroll 对象
const scrolls = (msg) => {
  state.scroll = msg;
};
// 返回顶部
const back = () => {
  state.scroll.scrollTo(0, 0, 300);
};
// scroll 触底事件
const pullingUp = () => {
  state.backshow = true;
  state.scroll.refresh();
  if (state.type == "流行") {
    state.goods.pop.page = state.goods.pop.page + 1;
    getlistdata("pop", state.goods.pop.page);
  } else if (state.type == "新款") {
    state.goods.new.page = state.goods.new.page + 1;
    getlistdata("new", state.goods.new.page);
  } else if(state.type == "精选") {
    state.goods.sell.page = state.goods.sell.page + 1;
    getlistdata("sell", state.goods.sell.page);
  }
};
// 上拉刷新事件
const pullingDown = () => {
  state.Loading = true;
  setTimeout(() => {
    window.location.reload();
  }, 1000);
};
</script>

<style scoped lang="scss">
.week {
  img {
    width: 100%;
  }
}
.recommended {
  width: 100%;
  p {
    font-size: 14px;
    color: #666666;
  }
}

.content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.home {
  position: relative;
  height: 100vh;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
</style>